<template>
  <view class="page_min_height page_fixed_button">
    <view
      class="flex justify-between px-20 py-20"
      style="background-image: linear-gradient(to bottom, #f5f6f7, #dfeaff)"
    >
      <view>
        <view class="text-2xl font-bold">律师费计算</view>
        <view class="mt-10 text-gray-400">根据案件类型快速进行费用估算</view>
      </view>
      <image class="w-88 h-88" src="/static/images/calc.png" mode="aspectFill" />
    </view>
    <view class="mt-[-12px] p-12 bg-white rounded-tl-xl rounded-tr-xl overhow-hidden">
      <uni-forms ref="formEl" :modelValue="formData" label-width="6rem" :rules="rules" label-position="top">
        <uni-forms-item v-if="formData.caseType === 'civil'" required label="收费方式" name="feeType">
          <uni-data-checkbox
            mode="tag"
            v-model="formData.feeType"
            :localdata="feeTypeMap"
            @change="initMoney"
          ></uni-data-checkbox>
        </uni-forms-item>
        <uni-forms-item v-if="formData.feeType === 'rate'" required label="案例类型" name="caseType">
          <uni-data-checkbox
            mode="tag"
            v-model="formData.caseType"
            :localdata="caseTypeMap"
            @change="initMoney"
          ></uni-data-checkbox>
        </uni-forms-item>
        <uni-forms-item v-if="formData.caseType === 'civil'" required label="标的金额" name="amount">
          <uni-easyinput v-model="formData.amount" type="digit" placeholder="请输入标的金额" />
        </uni-forms-item>
        <uni-forms-item v-if="formData.caseType === 'criminal'" required label="案件阶段" name="step">
          <uni-data-checkbox
            mode="tag"
            v-model="formData.step"
            :localdata="stepMap"
            @change="changeStep"
          ></uni-data-checkbox>
        </uni-forms-item>
      </uni-forms>
      <!-- 预计费用 -->
      <view
        class="h-150 mt-12 pt-20 text-center rounded-md"
        style="background-image: linear-gradient(to top, #f5f6f7, #dfeaff)"
      >
        <view class="text-base">预计律师费用</view>
        <view class="mt-12 text-blue-500 font-bold">
          <view v-if="formData.feeType === 'risk'" class="mb-4">不超过</view>
          <view>
            ￥<text class="text-2xl">{{ totalMoney }}</text>
          </view>
        </view>
      </view>
      <!-- 收费标准 -->
      <view class="mt-12 text-gray-400 leading-[1.6]">
        <template v-if="formData.feeType === 'risk'">
          <view>风险代理收费标准</view>
          <view class="mt-6">1.标的额不足100万元的部分，不得超过标的额的18%</view>
          <view>2.标的额在100万以上不足500万的部分，不得超过标的额的15%</view>
          <view>3.标的额在500万元以上不足1000万元的部分，不得超过标的额的12%</view>
          <view>4.标的额在1000万元以上不足5000万元的部分，不得超过标的额的9%</view>
          <view>5.标的额在5000万元以上的部分，不得超过标的额的6%</view>
        </template>
        <template v-else-if="formData.caseType === 'civil'">
          <view>民事案件收费标准</view>
          <view class="mt-6">1.10万元以下部分：8%-12%</view>
          <view>2.10-50万元部分：6%-8%</view>
          <view>3.50-100万元部分：4%-6%</view>
          <view>4.100-500万元部分：2%-4%</view>
          <view>5.500-1000万元部分：1%-2%</view>
          <view>6.1000万元以上部分：0.5%-1%</view>
        </template>
        <template v-else>
          <view>刑事案件收费标准</view>
          <view class="mt-6">1.侦查阶段：2000-20000元/件</view>
          <view>2.审查起诉阶段：2000-20000元/件</view>
          <view>3.一审阶段：3000-30000元/件</view>
          <view>4.二审阶段：2000-20000元/件</view>
          <view>5.再审阶段：3000-25000元/件</view>
        </template>
        <view class="mt-6 text-xs">
          注:此计算结果仅供参考，实际收费标准可能因地区、案件复杂程度等因素而异。建议咨询当地律师事务所获取准确报价。
        </view>
      </view>
    </view>
    <view class="bottom_fixed_wrapper justify-between">
      <view class="w-[46%] py-12 text-30 text-center text-blue-600 bg-blue-200 rounded-md" @click="onReset">重置</view>
      <view class="w-[46%] py-12 text-30 text-center primary_btn rounded-md" @click="onSubmit">计算</view>
    </view>
  </view>
</template>
<script setup>
import { ref } from 'vue';
import { debounce } from '@/utils/utils';

const feeTypeMap = ref([
  { text: '按标的额比例收费', value: 'rate' },
  { text: '风险代理收费', value: 'risk' },
]);
const caseTypeMap = ref([
  { text: '民事案件', value: 'civil' },
  { text: '刑事案件', value: 'criminal' },
]);
const stepMap = ref([
  { text: '侦查阶段', value: 0 },
  { text: '审查起诉阶段', value: 1 },
  { text: '一审阶段', value: 2 },
  { text: '二审阶段', value: 3 },
  { text: '再审阶段', value: 4 },
]);
const formEl = ref(null);
const formData = ref({
  feeType: 'rate',
  caseType: 'civil',
});
const totalMoney = ref(0);
const rules = {
  feeType: { rules: [{ required: true, errorMessage: '请选择收费方式' }] },
  caseType: { rules: [{ required: true, errorMessage: '请选择案件类型' }] },
  amount: { rules: [{ required: true, errorMessage: '请输入标的额' }] },
  step: { rules: [{ required: true, errorMessage: '请选择阶段' }] },
};

// 重置表单
function onReset() {
  formData.value = {
    feeType: 'rate',
    caseType: 'civil',
  };
  formEl.value.clearValidate();
  initMoney();
}
// 民事案件收费计算
const civilFeeList = [
  [0.08, 0.12],
  [0.06, 0.08],
  [0.04, 0.06],
  [0.02, 0.04],
  [0.01, 0.02],
  [0.005, 0.01],
];
// 风险代理收费计算
const riskFeeList = [0.18, 0.15, 0.12, 0.09, 0.06];
// 刑事案件收费计算
const criminalFeeList = [
  [2000, 20000],
  [2000, 20000],
  [3000, 30000],
  [2000, 20000],
  [3000, 25000],
];
// 提交表单
const onSubmit = debounce(function () {
  formEl.value
    .validate()
    .then(() => {
      const { feeType, caseType, amount, step } = formData.value;
      if (caseType === 'criminal') {
        const [min, max] = criminalFeeList[step];
        totalMoney.value = min + ' ~ ' + max;
      } else if (feeType === 'rate') {
        const range = getAmountRange(+amount);
        const [min, max] = civilFeeList[range];
        totalMoney.value = formatMoney(amount * min) + ' ~ ' + formatMoney(amount * max);
      } else if (feeType === 'risk') {
        const range = getRiskRange(+amount);
        totalMoney.value = formatMoney(amount * riskFeeList[range]);
      }
    })
    .catch(() => {
      initMoney();
    });
}, 300);
// 初始化金额
function initMoney() {
  totalMoney.value = 0;
}
function changeStep(e) {
  const { value } = e.detail;
  const [min, max] = criminalFeeList[+value];
  totalMoney.value = min + ' ~ ' + max;
}
// 获取标的额范围
function getAmountRange(amount) {
  if (amount < 100000) {
    return 0;
  } else if (amount >= 100000 && amount < 500000) {
    return 1;
  } else if (amount >= 500000 && amount < 1000000) {
    return 2;
  } else if (amount >= 1000000 && amount < 5000000) {
    return 3;
  } else if (amount >= 5000000 && amount < 10000000) {
    return 4;
  } else {
    return 5;
  }
}
// 获取风险代理额范围
function getRiskRange(amount) {
  if (amount < 1000000) {
    return 0;
  } else if (amount >= 1000000 && amount < 5000000) {
    return 1;
  } else if (amount >= 5000000 && amount < 10000000) {
    return 2;
  } else if (amount >= 10000000 && amount < 50000000) {
    return 3;
  } else {
    return 4;
  }
}
// 格式化金额
function formatMoney(money) {
  return Number(money.toFixed(2));
}
</script>
